<template>
    <el-card class="box-card">
        <template #header>
            <span>历史报警记录</span>
        </template>
        <div ref="main" style="width: 100%;height:300px;"></div>
    </el-card>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    name: 'SensorWarnHistoryCard'
})
</script> 
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
const main = ref()
const init = () => {
    var myChart = echarts.init(main.value);
    var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }
        ]
    };
    option && myChart.setOption(option);
}
onMounted(() => {
    init()
})

let props = defineProps(['headerText', 'ringCharts'])
</script>
<style lang="less" scoped>
.box-card {
    width: 49%;
}
</style>